<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-calendar"></i> 课程管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>新建课程</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div>
        <div class="form-box">
          <el-form ref="form"
                   :model="courseDto.course"
                   label-width="120px">
            <div style="display:flex;flex-direction: row">
              <div>
                <!-- 封面 -->
                <el-row>
                  <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                      <el-form-item class="uploadCover"
                                    size="mini">
                        <UploadImg @imageUrlChange="imageUrlChange"></UploadImg>
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <div class="grid-content bg-purple">
                      <!-- 视频 -->
                      <el-form-item class="uploadVideo"
                                    size="mini">
                        <UploadVideo @videoUrlChange="videoUrlChange"></UploadVideo>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple-light">
                      <el-form-item class="uploadFile uploadFile1"
                                    size="mini">
                        <UploadFile @fileUrlChange="fileUrlChange"></UploadFile>
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>

              </div>
              <div style="margin-left:10px">
                <el-form-item class="coursetime"
                              label="课程用时"
                              size="mini">
                  <el-input v-model="courseDto.course.coursetime"
                            placeholder="请输入整小时"
                            style="width: 200px;margin-left:20px"></el-input>
                </el-form-item>
                <el-form-item class="coursename"
                              label="课程标题"
                              size="mini">
                  <el-input v-model="courseDto.course.coursename"
                            placeholder="请输入课程名"
                            style="width: 200px;margin-left:20px"></el-input>
                </el-form-item>
                <el-form-item class="category"
                              label="课程分类"
                              size="mini">
                  <el-select v-model="courseDto.course.category"
                             placeholder="请选择分类"
                             style="margin-left:20px;width: 200px;">
                    <el-option v-for="item in categoryList"
                               :key="item.id"
                               :label="item.categoryname"
                               :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="establisher"
                              label="管理员设置">
                  <el-select v-model="courseDto.course.establisher"
                             placeholder="请选择管理员"
                             style="margin-left:20px;width: 200px;">
                    <el-option v-for="item in createrList"
                               :key="item.id"
                               :label="item.account"
                               :value="item.account">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <div class="buttons">
                    <el-button type="primary"
                             @click="onSubmit">提交</el-button>
                  <el-button>取消</el-button>
                  </div>
                </el-form-item>
              </div>
            </div>

          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UploadImg from '../common/uploadImg.vue';
import UploadFile from '../common/uploadFile.vue';
import UploadVideo from '../common/uploadVideo.vue';
export default {
    name: 'baseform',
    inject:['refresh'],
    data() {
        return {
            selectValue: [],
            categoryList: [],
            createrList: [],
            courseDto: {
                course: {
                    coursename: '',
                    cover: '../../assets/img/upload.png',
                    establisher: '',
                    video: '',
                    category: '',
                    coursetime: '',
                    status: ''
                },
                accessoryList: []
            }
        };
    },
    methods: {
        findCategory() {
            this.$axios
                .post('/api/category/findCategory/', {})
                .then((res) => {
                    this.categoryList = res.data.data;
                })
                .catch();
        },
        onSubmit() {
            //this.courseDto.course.establisher=
            this.$axios
                .post('/api/course/create', this.courseDto)
                .then((res) => {
                    if(res.data.code==200){
                       this.$message.success('提交成功！');
                       this.refresh();
                    }else{
                       this.$message.error('提交失败！');
                    }
                })
                .catch();
        },
        imageUrlChange(data) {
            this.courseDto.course.cover = data;
        },
        fileUrlChange(data) {
            let accessory = {
                name: data.name,
                url: 'http://' + data.response.data
            };
            this.courseDto.accessoryList.push(accessory);
            //console.log(this.courseDto.accessoryList);
        },
        videoUrlChange(data) {
            this.courseDto.course.video = data;
        },
        findComments() {
            this.$axios
                .post('/api/comment/findComments', { userid: 1, courseid: 1 })
                .then((res) => {
                    if (res.data.code == 200) {
                        this.commentList = res.data.data;
                    }
                })
                .catch();
        },
        findCreater() {
            this.$axios
                .get('/api/users/findAllUser')
                .then((res) => {
                    res.data.data.forEach((element) => {
                        if (element.role == '管理员') {
                            this.createrList.push(element.user);
                        }
                    });
                })
                .catch();
        }
    },
    components: {
        UploadImg,
        UploadFile,
        UploadVideo
    },
    created() {
        this.findCategory();
        this.findCreater();
    }
};
</script>
<style>
.el-form-item__content {
    margin-left: auto;
    width: 100% !important;
}
.avatar-uploader {
    margin-left: 49px !important;
    width: 100% !important;
}
.buttons{
margin-left: 20px;
}
.uploadFile1 .el-upload-list{
  margin-left: 34px !important;
      width: 100%;
}
.buttons {
    margin-left: 98px;
    margin-top: 23px;
}
</style>